#playbackPanelWrapper {

  margin-top: 10px;
  margin: auto;

  @include breakpoint(xs) {
    margin: 0px;
  }

  #leftPanel, #rightPanel {
    text-align: center;
    height: calc(100vh - 100px);
    @include make-sm-column(8);

    @include breakpoint(xs) {
      height: auto;
    }
    @include breakpoint(sm) {
      height: auto;
    }
  }

  #centerPanel {
    @include make-sm-column(8);
  }

  &.mobile {
    height: 100%;
    overflow: hidden;

    // Disabiling top radiuses
    /*
    -webkit-border-top-left-radius: 30px;
    -webkit-border-top-right-radius: 30px;
    -moz-border-radius-topleft: 30px;
    -moz-border-radius-topright: 30px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    */
    background: $theme-dark-transparent-background;

    #albumartContainer {
      position: relative;
      margin: 8px;

      .cover-art-container {

        text-align: center;
        scrollbar-width: none;

        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;

        img {
          display: block;
          padding: 0;
          margin: auto;
          // height: 100%;
          max-height: 100%;
          width: 100%;
          object-fit: contain;
        }
      }
    }

    .track-info-container{
      margin-top: 16px;

      @media all and (max-height: 500px){
        margin-top: 4px;
      }

    }

    .track-info-rates {
      font-size: 11px;
      white-space: nowrap;
      margin-top: 2px;

      .track-info-type {
        margin-top: 15px;
        font-size: 14px;

        img {
          height: 16px;
          max-width: 24px;
        }

        span {
          font-size: 11px;
        }
      }
    }

    .track-button-container{
      text-align: center;


      #trackButtonBar{
        display: inline-block;
        background: transparent !important;
      }

      button{

        @media all and (max-height: 500px){
          padding: 0 8px;
          height: auto;
          width: auto;
        }

        i {
          font-size: 20px;

          @media all and (max-height: 600px) {
            font-size: 16px;
          }
        }
      }

    }

    .player-buttons-container{
      margin-top: 12px;

      #playerButtons {
        height: 70px;

        position: relative;
        right: -3px;

        // hotfix for iphone 4 res
        @media all and (max-height: 500px){

          height: 50px;

          & > button{
            padding: 0 8px !important;
            height: 30px;

            i{
              font-size: 14px;
            }
          }
        }

        .playPause {
          left: 0 !important;
          top: -50px;

          @media all and (max-height: 500px) {
            height: 44px;
            width: 44px;

            &.play i{
              padding-left: 2px;
            }
          }

        }
      }
    }
  }

  .player-seekbar-container{
    margin-bottom: 8px;

    @media all and (max-height: 500px) {
      margin-bottom: 4px;
    }
  }

}

i#closePlaybackPanelWrapper {
    font-size: 48px;
    color: $close-playback-panel-button-color;
}

div#goBackPanelWrapper {
    top: -10px;
    max-height: 30px;
    z-index: 4;
}
